import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "../../src/App.css";
import "./time.less";

let count = 0;

class ListItem extends Component {
  constructor(props) {
    super(props);
    console.log(props);

    this.state = {
      noGetMessageDisplay: "none",
      phone: this.props.phone || "",
      mobile_code: this.props.mobile_code || "",
      count: 60,
      liked: true,
    };

    this.handleClick = this.handleClick.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  noGetMessage = (e) => {
    // this.getAudioRequest();
  };
//   const arr = ['hi',['hello',1],2,[3,[4,[5]]]]
//   function flat(list, depth=1) {
//       //...
// }
//   flat(arr);
  // 默认展开一层
  // ["hi","hello",1,2,3,[4,[5]]]
//   flat(arr, 3);
  // 第二个参数支持控制层级
  // ['hi', 'hello', 1, 2, 3, 4, 5]
  cengji() {
    const arr = ['hi',['hello', 1],2,[3,[4,[5]]]]
    var newArr = arr.flat(3)
    console.log(arr);
    console.log(newArr);
 function myFlat(arr, depth) {
   return depth > 0
     ? arr.reduce(
         (pre, cur) =>
           pre.concat(Array.isArray(cur) ? myFlat(cur, depth - 1) : cur),
         []
       )
     : arr.filter((item) => item !== undefined);
 }
 console.log(myFlat(arr, 3))
  }


  //获取短信验证码
  handleClick = () => {
    if (!this.state.liked) {
      return;
    }

    if (this.state.phone === "") {
      alert("请先输入手机号");
      return;
    } else {
      console.log("点击获取验证码");

      console.log(this.state.liked);
      let count = this.state.count;
      console.log(count);
      const timer = setInterval(() => {
        this.setState({ count: count--, liked: false }, () => {
          if (count === 0) {
            clearInterval(timer);
            this.setState({
              liked: true,
              count: 60,
            });
          }
        });
      }, 1000);
    }
  };

  handleInputChange(event) {
    const target = event.target;
    const name = target.name;
    const value = target.value;
    this.setState(
      {
        [name]: value,
      },
      () => {
        // console.log(this.state)
      }
    );
  }
  render() {
    return (
      <div>
        <div className="verification">
          <div
            className="verification_box"
            style={{ display: this.state.isRegLoginContainer }}
          >
            <div
              className="verification_content"
              style={{ display: this.state.isLoginContainer }}
            >
              <div className="phone_number">
                <p>手机号</p>
                <input
                  type="tel"
                  placeholder="请输入手机号"
                  maxLength="11"
                  name="phone"
                  value={this.state.phone}
                  onChange={this.handleInputChange}
                />
              </div>
              <div className="vscode_message">
                <div className="vscode_title">
                  <p>验证码</p>
                </div>
                <div className="get_receive_vscode">
                  <p onClick={this.handleClick}>
                    {this.state.liked ? (
                      <span>获取验证码</span>
                    ) : (
                      <span className="count_second">
                        {this.state.count + "s后可以再次发送"}
                      </span>
                    )}
                  </p>
                  <input
                    type="tel"
                    placeholder="请输入验证码"
                    maxLength="4"
                    name="mobile_code"
                    value={this.state.mobile_code}
                    onChange={this.handleInputChange}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div onClick={this.cengji()}>1234</div>
      </div>
    );
  }
}

export default ListItem;
